<template>
  <el-dialog
    width="600px"
    :title="$t('m.add')+$t('m.page.partition')"
    :visible.sync="popupVisible"
    :close-on-click-modal="false"
    :before-close="close">
    <el-form :rules="ruleForm" ref="form" size="mini" :model="formInline" label-width="120px">
      <el-form-item :label="$t('m.page.warehouse')+$t('m.name')">
        <el-input size="mini" v-model="$store.state.basicInfo.warehouseInfo.name" disabled></el-input>
      </el-form-item>
      <el-form-item :label="$t('m.page.partition')+$t('m.name')" prop="partitionname">
        <el-input maxlength="20" show-word-limit v-model.trim="formInline.partitionname"></el-input>
      </el-form-item>
      <el-form-item :label="$t('m.page.partition')+$t('m.code')" prop="partitioncode">
        <el-input @input="validateNumber('partitioncode')" maxlength="2" show-word-limit v-model.trim="formInline.partitioncode"></el-input>
      </el-form-item>
      <el-form-item :label="$t('m.type')" prop="typevalueid">
        <el-select
          v-model="formInline.typevalueid"
          :placeholder="$t('m.choose')">
          <el-option
            v-for="item in typevalueOptions"
            :key="item.typevaluenum"
            :label="item.typevalue"
            :value="item.typevaluenum">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('m.partition.isshelves')" prop="isshelves">
        <el-select v-model="formInline.isshelves" :placeholder="$t('m.choose')">
          <el-option
            v-for="item in isshelves"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('m.sortNumber')" prop="orderno">
        <el-input maxlength="10" show-word-limit @input="validateNumber('orderno')" v-model.trim="formInline.orderno"></el-input>
      </el-form-item>
      <el-form-item :label="$t('m.remark')" prop="remark">
        <el-input
          type="textarea"
          maxlength="100"
          show-word-limit
          v-model="formInline.remark">
        </el-input>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="24">
        <el-button size="mini" @click="close">{{$t('m.cancel')}}</el-button>
        <el-button size="mini" type="primary" @click="submit" :loading="btnLoading">{{$t('m.confirm')}}</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
import {formValidate} from '@/assets/mixins/rule/partition-add-validate'
export default {
  name:'handle-partition-popup',
  props:['popupVisible','typevalueOptions'],
  mixins:[formValidate],
  data(){
    return {
      formInline:{
        isshelves:'', // 是否支持上架
        orderno:'', // 排序号
        page:0,
        partitioncode:'', // 库区编码
        partitionid:0, // 新增库区id位0
        partitionname:'', // 库区名称
        remark:'', // 备注
        rows:0,
        typevalue:'', // 库区类型名称
        typevalueid:'' // 库区类型id
      },

      btnLoading:false // 控制按钮loading，防止重复提交
    }
  },
  computed:{
    isshelves(){
      return [
        {value:0,label:this.$t('m.no')},
        {value:1,label:this.$t('m.yes')}
      ]
    }
  },
  methods:{
    validateNumber(key){
      this.$set(this.formInline,key,this.formInline[key].replace(/[^\d]/g,''))
    },
    close(){
      this.$emit('close')
    },
    submit(){
      this.$refs['form'].validate(valid => {
        if (valid){
          this.formInline.typevalue = this.typevalueOptions.find((item)=> item.typevaluenum === this.formInline.typevalueid).typevalue
          this.btnLoading = true
          this.$axios({
            method:'post',
            url:'/partition/insert',
            data:Object.assign({},this.formInline,{state:1,warehouseid:this.$store.state.basicInfo.warehouseInfo.id})
          }).then(()=> {
            this.$message({
              showClose:true,
              message:this.$t('m.success'),
              type:'success',
              duration:1000
            })
            this.btnLoading = false
            this.$emit('close')
            this.$emit('callback')
          }).catch(()=>{
            this.btnLoading=false
          })
        }
      })
    }
  }
}
</script>